<style scoped>
.stopwatch{
  --progress-background: var(--color-primary);
}
.stopwatch{display: flex;flex-direction: column;align-items: center;position: fixed;top: 60%;right: 0;width: 66px;background: rgba(255,255,255,.8);padding: 3px;border-radius: 10px;overflow: hidden;transition: right .5s;}
.stopwatch.is_hidden{right: -56px;}
.stopwatch .s94_icon{width: 80%;}
.progress{margin-top: 2px;width: 100%;height: 8px;border-radius: 4px;background: rgba(100,100,100,.5);}
.progress>.progress-inner{display: block;width: 0;height: 100%;border-radius: 4px;transition: width .8s linear;background: var(--progress-background);}
.text{width: 100%;font-size: 9px;text-align: center;}
</style>
<template>
  <!--iframe，iframe_exe，iframe_hide，iframe_remove 方法对话框-->
  <template v-for="(row, key) in iframe_map">
    <el-dialog v-model="row.show" :title="row.title" :width="row.width" :draggable="true" style="height: 90vh;margin: 5vh auto;" :destroy-on-close="true"  @closed="delete iframe_map[key]" >
      <component :is="row.path" :ref="key" :__iframe="row" ></component>

      <template v-if="row.btns.length">
        <div class="flex" style="justify-content: flex-end;position: absolute;bottom: 0;right: 0;padding: 05px;background: #fff;">
          <el-button v-for="btn in row.btns" :type="btn.type" :size="btn.size" @click="btn.onclick($refs[key][0])">{{ btn.title }}</el-button>
        </div>
      </template>
    </el-dialog>
  </template>
</template>

<script>

import {decode_btns, eq} from "@/js/s94_tool.js";
import s94Mjs from "s94-js";
import {VIEW_COMPONENT_MAP} from "@/vue_plugin/router_auto.js";
import {defineAsyncComponent} from "vue";

export default {
  components: {},
  data(){
    return {
      is_show: false,
      callback(ac){},

      iframe_map: {},
    }
  },
  methods: {
    show(config){
      if (typeof config === 'string') config = {href:config};
      if (typeof config !== 'object') config = {};
      if (!config.href) return console.error('缺少 href')
      // 自减所有还显示的子窗口的z_index，确保调用show方法的窗口z_index最大
      Object.keys(this.iframe_map).forEach(row=>{
        if(row.show) row.z_index--;
      })
      let key = this.find_iframe(config.href, '==') || 'frame'+(new Date()).getTime();
      let frame_row = this.iframe_map[key];
      if (!frame_row){
        let arr = config.href.split('?');
        frame_row = {
          key: key,
          href: config.href.replace(/^\//,''),
          path: s94Mjs.trim(arr[0], '/'),
          param: arr[1] ? s94Mjs.param_decode(arr[1]) : {}
        };
        if (!(frame_row.path in this.$options.components)) {
          if (!VIEW_COMPONENT_MAP[frame_row.path]) return console.error(`页面 ${frame_row.path} 不存在`);
          this.$options.components[frame_row.path] = defineAsyncComponent(()=>VIEW_COMPONENT_MAP[frame_row.path]);
        }
        this.iframe_map[key] = frame_row;
      }
      frame_row.show = true;
      frame_row.z_index = 999;
      frame_row.btns = decode_btns(config.btns || []);
      frame_row.width = config.width || '80%';
      frame_row.title = config.title || '';

      return this;
    },
    hide(href){
      return this.remove(href);
      let key = this.find_iframe(href);
      if (key) this.iframe_map[key].show = false;
    },
    init(){
      // 关闭全部框架
      Object.keys(this.iframe_map).forEach(key=>{
        this.iframe_map[key].show = false;
      })
    },

    remove(href){
      let key = this.find_iframe(href);
      if (key) delete this.iframe_map[key];
    },
    /**查找子窗口，
     * @param {string} href 窗口地址
     * @param {string} [mode] 参数匹配模式，左边表示href内的参数
     * @param {*} [add_window] 是否把当前路由加入判断，当前路由的key为window
     * @returns {string} 返回符合条件的子窗口键
     */
    find_iframe(href, mode, add_window){
      mode = mode || '*=='; //默认是href参数可以为underfined，例如：goods/index?a=a 可以匹配 goods/index?a=a&b=b
      let arr = href.split('?');
      let path = s94Mjs.trim(arr[0], '/');
      let param = arr[1] ? s94Mjs.param_decode(arr[1]) : {};
      let res_key = '';
      if (add_window){
        let win_frame = {path:s94Mjs.trim(this.$route.path, '/'), param:this.$route.query}
        if (win_frame.path === path && eq(param, win_frame.param, mode)) return 'window';
      }
      Object.keys(this.iframe_map).some(key=>{
        let frame_row = this.iframe_map[key];
        if (frame_row.path !== path) return false;
        if (!eq(param, frame_row.param, mode)) return false;
        res_key = key;
        return true;
      })
      return res_key;
    },
    /**子窗口执行方法
     * @param {string} href 窗口地址
     * @param {string} function_name 方法名，多级用.分割，例如：this.$refs.forms.init
     * @param {*} args 方法执行传入的参数，可以传入多个
     * @returns {*}
     */
    exe(href, function_name, ...args){
      let key_arr = function_name.replace(/^(app|this)\./,'').split('.');
      let key = this.find_iframe(href, '==', true);
      if (!key) return ;
      let app = key==='window' ? window.app : this.$refs[key][0];
      let return_res = undefined;
      for (let i = 0; i < key_arr.length; i++) {
        let k = key_arr[i];
        if (i >= key_arr.length-1){
          return_res = app[k].apply(app, args);
        }else {
          app = app[k];
        }
      }
      return return_res;
    },
  },
  watch: {
  },
  mounted() {
  }
}
</script>